<script setup>
import { ref } from "vue";
import { QuestionFilled, Comment, PhoneFilled } from "@element-plus/icons-vue";
const footerLinkList = ref([
  {
    name: "How to buy",
    options: [
      { path: "/", title: "Payment methods" },
      { path: "/", title: "Order pickup" },
      { path: "/", title: "Purchase status" },
      { path: "/", title: "Track orders" },
      { path: "/", title: "Returns" },
    ],
  },
  {
    name: "How to buy",
    options: [
      { path: "/", title: "Payment methods" },
      { path: "/", title: "Order pickup" },
      { path: "/", title: "Purchase status" },
      { path: "/", title: "Track orders" },
      { path: "/", title: "Returns" },
    ],
  },
  {
    name: "How to buy",
    options: [
      { path: "/", title: "Payment methods" },
      { path: "/", title: "Order pickup" },
      { path: "/", title: "Purchase status" },
      { path: "/", title: "Track orders" },
      { path: "/", title: "Returns" },
    ],
  },
  {
    name: "How to buy",
    options: [
      { path: "/", title: "Payment methods" },
      { path: "/", title: "Order pickup" },
      { path: "/", title: "Purchase status" },
      { path: "/", title: "Track orders" },
      { path: "/", title: "Returns" },
    ],
  },
]);
</script>

<template>
  <footer class="page-footer">
    <el-row class="footer-top">
      <el-col :span="6" v-for="(item, index) in footerLinkList" :key="index">
        <p class="type-name">{{ item.name }}</p>
        <p
          class="link-item"
          v-for="(linkItem, index2) in item.options"
          :key="index2"
        >
          <a :href="linkItem.path">{{ linkItem.title }}</a>
        </p>
      </el-col>
    </el-row>
    <div class="hr-px"></div>
    <el-row class="footer-middle">
      <el-col :span="8">
        <div class="contact-item">
          <el-icon size="34px"><QuestionFilled /></el-icon>
          <p class="item-title">Help center</p>
          <p class="item-desc">Find answers online anytime</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="contact-item">
          <el-icon size="34px"><Comment /></el-icon>
          <p class="item-title">Live chat</p>
          <p class="item-desc">Mon–Fri, 5am–10pm PT<br />Sat–Sun, 6am–9pm PT</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="contact-item">
          <el-icon size="34px"><PhoneFilled /></el-icon>
          <p class="item-title">1 234 567 8901</p>
          <p class="item-desc">Mon–Fri, 5am–10pm PT<br />Sat–Sun, 6am–9pm PT</p>
        </div>
      </el-col>
    </el-row>
    <div class="footer-bottom">
      <div class="footer-bottom-content"></div>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
.page-footer {
  background-color: #f4f4f5;
  .footer-top {
    width: 153.6rem;
    padding: 4rem;
    margin: 0 auto;
    box-sizing: border-box;
    .type-name {
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
      padding: 0 0 8px;
    }
    .link-item {
      font-size: 14px;
      line-height: 20px;
      padding: 8px 0;
      a {
        color: #52525b;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .hr-px {
    height: 1px;
    background-color: #e5e7eb;
  }
  .footer-middle {
    width: 153.6rem;
    padding: 4rem;
    margin: 0 auto;
    box-sizing: border-box;
    .contact-item {
      display: flex;
      align-items: center;
      flex-direction: column;
      .item-title {
        margin: 8px auto;
        line-height: 28px;
        font-size: 18px;
        font-weight: 500;
      }
      .item-desc {
        line-height: 20px;
        font-size: 14px;
        color: #52525b;
        text-align: center;
      }
    }
  }
  .footer-bottom {
    height: 72px;
    background-color: #18181b;
    .footer-bottom-content {
      width: 153.6rem;
      padding: 0 7rem;
      margin: 0 auto;
    }
  }
}
</style>
